<template>
  <div>
    <div class="title_box">
        <span class="iconfont icon-left" @click="$router.go(-1)"></span>
        <div class="title">全部类目</div>
    </div>
    <div class="search" @click="goSearch">
      <span class="iconfont icon-soushuo1"></span>
      <span>关键词搜索...</span>
    </div>
    <div class="category">
      <div class="box">
        <div class="left">
          <ul>
            <li v-for="(item, index) in category" :key="index" @click="getIndex(index)" :class="conId == index?'con':''">
              {{ item.cat_name }}
            </li>
          </ul>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item,index) in category[conId].children" :key="index" >
                <div class="goodsTitle">{{item.cat_name}}</div>
                <ol>
                    <li v-for="(item,index) in item.children" :key="index" @click="goGoodslist(item.cat_name)">
                        <div class="goods_icon">
                            <img :src="item.cat_icon" alt="">
                        </div>
                        <div class="catName">{{item.cat_name}}</div>
                    </li>
                </ol>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      category: [],
      conId: 0
    };
  },
  methods: {
    api() {
      return "https://api-hmugo-web.itheima.net/api/public/v1";
    },
    // 获取轮播图
    getCategoryFun() {
      axios
        .get(this.api() + "/categories")
        .then((data) => {
          this.category = data.data.message;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getIndex(id){
        this.conId = id
    },
    goGoodslist(name){
      this.$router.push({path:"/goodslist",query:{name}})
    },
    goSearch(){
      this.$router.push({path:"searchList"})
    }
  },
  mounted(){
    this.getCategoryFun();
  },
  created() {
    
  },
};
</script>

<style lang="less" scoped>
.category {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 122px;
  bottom: 0px;
  overflow: hidden;
  .box {
    height: 100%;
    overflow: hidden;
    .left {
      float: left;
      width: 20%;
      height: 100%;
      border-right: 1px solid #e8e8e8;
      box-sizing:border-box;
      overflow-y: auto;
      ul {
        overflow: hidden;
        li {
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 18px;
          &.con{
              color: #FF0277;
              background: #fff;
          }
        }
      }
    }
    .right {
      width: 80%;
      height: 100%;
      overflow: hidden;
      background: #fff;
      overflow-y: auto;
      .goodsTitle{
          text-align: center;
      }
      ol{
          overflow: hidden;
          li{
              float: left;
              width: 20%;
              text-align: center;
              padding: 10px;
              .goods_icon{
                  width: 80px;
                  margin: 0px auto;
                img{
                    width: 100%;
                    height: 100%;
                }
              }
              .catName{
                  font-size: 18px;
                  color: #999999;
              }
          }
      }
    }
  }
}
.title_box {
  height: 47px;
  line-height: 47px;
  padding: 7px 0px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  span{
      float: left;
      width: 50px;
  }
  .title{
      width: 110px;
      margin: auto;
  }
}
.search {
  margin: 10px;
  height: 40px;
  line-height: 40px;
  background: #fff;
  font-size: 16px;
  text-indent: 1em;
  color: #999999;
  border-radius: 4px;
  .iconfont {
    margin-right: 6px;
  }
}
body {
  background: #f6f6f6;
  height: 100%;
}
</style>
